<template>
  <div class="forgetPassword">
    <div class="header">
      <div class="logo">

      </div>
      <p>管理更简单，执行更高效</p>
    </div>
    <div class="inner">
      <div class="inner-header">
        <h3>找回密码</h3>
      </div>
      <div class="content">
        <el-form class="retrieveForm" ref="retrieveForm" :model="retrieveForm" :rules="retrieveRule">
          <el-form-item prop="phone" class="loginForm-item">
            <span class="span">*</span>
            <div class="i ic_tel_nor"></div>
            <el-input type="text" placeholder="请输入手机号" v-model="retrieveForm.phone"
            ></el-input>
          </el-form-item>
          <el-form-item prop="vCode" class="loginForm-item loginForm-item-code">
            <span class="span">*</span>
            <div class="i ic_code_nor"></div>
            <el-input type="text" placeholder="请输入验证码" v-model="retrieveForm.vCode"
            ></el-input>
            <el-button class="getCodeBtn" :disabled="sendCodeType" @click="getSendCode('retrieveForm')">{{sendCodeCount}}
            </el-button>
          </el-form-item>
          <el-form-item class="loginForm-item" prop="password">
            <span class="span">*</span>
            <div class="i ic_lock_nor"></div>
            <el-input type="password" placeholder="请输入密码" v-model="retrieveForm.password"
                      autocomplete="new-password"
                      @keyup.enter.native="" :maxlength="16"></el-input>
          </el-form-item>
          <el-form-item class="loginForm-item" prop="password">
            <span class="span">*</span>
            <div class="i ic_lock_nor"></div>
            <el-input type="password" placeholder="请再次输入密码" v-model="retrieveForm.password2"
                      autocomplete="new-password"
                      @keyup.enter.native="" :maxlength="16"></el-input>
          </el-form-item>
          <el-form-item class="loginForm-item" style="margin-bottom:20px;">
            <div class="sub-btn" @click="retrieveSubmit('retrieveForm')">提交</div>
          </el-form-item>
        </el-form>
      </div>

    </div>
    <el-dialog
      :visible.sync="isShowKaptchaRender"
      title="效验"
      width="400px"
    >
      <div style="text-align:center">
        <div style="padding-bottom:10px;">
          <img :src="serverIp+'user/verify/img?randomNum='+imgageCodeUrl"
               @click="imgageCodeUrl = Math.ceil(Math.random() * 1000000)">
        </div>

        <el-input type="text" placeholder="请输入验证码" v-model="imageCode" style="width:60%;" :maxlength="6"
                  autocomplete="off"></el-input>


      </div>
      <div slot="footer">
        <el-button type="primary" style="margin-left:0;" long @click="kaptchaRenderOk">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "ForgetPassword",
    data() {
      const validatePhone = (rule, value, callback) => {
        var reg = /^1\d{10}$/;
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号'));
        } else {
          callback();
        }
      };
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if (this.getBLen(value) <= 3) {
          callback(new Error('设置密码最少为四位数'));
        } else {
          if (this.retrieveForm.password2 !== '') {
            // 对第二个密码框单独验证
            this.$refs.retrieveForm.validateField('password2');
          }
          callback();
        }
      };
      const validatePassCheck = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (this.getBLen(value) <= 3) {
          callback(new Error('输入密码请大于三位'));
        } else if (value !== this.retrieveForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        sendCodeCount: '获取验证码',
        sendCodeType: false,
        imageCode: '',
        imgageCodeUrl: '',
        isShowKaptchaRender: false, //验证码弹窗
        retrieveForm: { //找回密码表单
          phone: '',
          vCode: '',
          password: '',
          password2: ''
        },
        retrieveRule: { //找回密码表单验证
          phone: [
            {required: true, validator: validatePhone, trigger: 'blur'}
          ],
          vCode: [
            {required: true, message: '请输入验证码', trigger: 'blur'}
          ],
          password: [
            {required: true, validator: validatePass, trigger: 'blur'}
          ],
          password2: [
            {required: true, validator: validatePassCheck, trigger: 'blur'}
          ]
        },
      }
    },
    methods: {
      //获取字符串长度
      getBLen(str) {
        if (str == null) return 0;
        if (typeof str != "string") {
          str += "";
        }
        return str.replace(/[^\x00-\xff]/g, "01").length;
      },
      //获取图片验证码
      getSendCode(name) {
        var _this = this;
        this.$refs[name].validateField('phone', (valid) => {
          if (!valid) {
            _this.isShowKaptchaRender = true;
            _this.imgageCodeUrl = Math.ceil(Math.random() * 1000000);
            _this.sendCodePhone = _this[name].phone;
            _this.imageCode = '';
          }
        })
      },
      //获取短信验证码
      kaptchaRenderOk() {
        if (this.imageCode == '') {
          this.$message.error("请输入验证码");
          return;
        }
        let _this = this;
        this.$http.post("/user/verify/sendCode", {
          phone: this.sendCodePhone,
          imageCode: this.imageCode,
          randomNum: this.imgageCodeUrl
        }).then(res => {
          let data = res;
          if (data.statusCode == 200) {
            _this.isShowKaptchaRender = false;
            _this.$message.success("发送成功");
            _this.sendCodeType = true;
            _this.sendCodeCount = '60秒';
            var count = 59, indexS = '';
            function countTimeout() {
              indexS = setTimeout(function () {
                if (count <= 1) {
                  _this.sendCodeType = false;
                  _this.sendCodeCount = '获取验证码';
                } else {
                  count -= 1;
                  _this.sendCodeCount = count + '秒';
                  countTimeout();
                }
              }, 1000);
            }

            countTimeout();
          } else {
            this.$Message.error(data.statusMsg);
            this.imageCode = '';
            this.imgageCodeUrl = Math.ceil(Math.random() * 1000000);
          }
        });
      },
      //修改密码
      retrieveSubmit(name){
        var _this = this;
        this.$refs[name].validate((valid) => {
          if (valid) {
            var json = {
              newPassword: _this.retrieveForm.password,
              phoneOauthCode: _this.retrieveForm.vCode,
              phone: _this.retrieveForm.phone
            };
            _this.$http.post("user/user/resetPassword",json).then(res=>{
              if(res.statusCode==200){
                _this.$message.success("密码修改成功");
                setTimeout(function () {
                  _this.$router.push({path: '/login'})
                }, 1000)
              }else {
                _this.$message.error(res.statusMsg);
              }
            });
          }
        })
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .forgetPassword {
    height: 100%;

    .header {
      width: 100%;
      position: absolute;
      padding: 0 100px;
      height: 120px;
      line-height: 120px;
      background: #ffffff;
      top: 0;
      left: 0;
      text-align: right;
      color: #7392AD;
      font-size: 18px;
      letter-spacing: 10px;

      .logo {
        background-image: url("../../assets/img/login/forgetPassword/logo.png");
        width: 221px;
        height: 100px;
        background-size: cover;
        background-position: center;
        left: 100px;
        top: 0;
        position: absolute;
      }
    }

    .inner {
      width: 1200px;
      height: 753px;
      padding: 0 100px;
      background: #ffffff;
      margin: 160px auto auto auto;
      box-sizing: border-box;

      .inner-header {
        height: 120px;
        padding-top: 0;
        border-bottom: 1px #eeeeee solid;
        box-sizing: border-box;

        h3 {
          text-align: left;
          font-size: 20px;
          color: #666666;
          padding-top: 77px;
          font-weight: normal;
        }
      }

      .content {
        padding-top: 55px;
        padding-left: 337px;

        .retrieveForm {
          .loginForm-item {
            width: 355px;
            position: relative;
            margin-bottom: 28px;

            .span {
              position: absolute;
              color: #e44120;
              left: -20px;
              top: 5px;
            }

            .i {
              position: absolute;
              width: 20px;
              height: 20px;
              left: 10px;
              top: 12px;
              z-index: 10;
            }

            .ic_tel_nor {
              background-image: url("../../assets/img/login/forgetPassword/ic_tel_nor.png");
            }

            .ic_tel_nor.active {
              background-image: url("../../assets/img/login/forgetPassword/ic_tel_pre.png");
            }

            .ic_code_nor {
              background-image: url("../../assets/img/login/forgetPassword/ic_code_nor.png");
            }

            .ic_code_nor.active {
              background-image: url("../../assets/img/login/forgetPassword/ic_code_pre.png");
            }

            .ic_lock_nor {
              background-image: url("../../assets/img/login/forgetPassword/ic_lock_nor.png");
            }

            .ic_lock_nor.active {
              background-image: url("../../assets/img/login/forgetPassword/ic_lock_pre.png");
            }

            .ic_company_nor {
              background-image: url("../../assets/img/login/forgetPassword/ic_company_nor.png");
            }

            .ic_name_nor {
              background-image: url("../../assets/img/login/forgetPassword/ic_name_nor.png");
            }

            .ic_company_code_nor {
              background-image: url("../../assets/img/login/forgetPassword/ic_company_code_nor.png");
            }

            .sub-btn {
              width: 355px;
              height: 56px;
              line-height: 56px;
              text-align: center;
              color: #FFFFFF;
              border-radius: 6px;
              background-color: #1192fa;
              font-size: 20px;
              cursor: pointer;
              margin-top: 16px;
            }
          }

          .loginForm-item-code {
            width: 220px;
            position: relative;

            .getCodeBtn {
              position: absolute;
              right: -135px;
              top: 4px;
              width: 110px;
              height: 36px;
              color: #FFFFFF;
              font-size: 14px;
              text-align: center;
              background-color: #1192fa;
              border-radius: 6px;
              cursor: pointer;
            }
          }
        }
      }
    }

  }
</style>
<style type="text/scss" lang="scss">
  .forgetPassword {
    .el-input__inner {
      padding: 0 45px;
      line-height: 44px;
      height: 44px;
      font-size: 16px;
    }

    .el-dialog__header {
      border-bottom: 1px solid #e8eaec;
    }

    .el-dialog__body {
      .el-input__inner {
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
      }
    }

    .el-dialog__footer {
      border-top: 1px solid #e8eaec;

      button {
        width: 100%;
      }
    }
  }

</style>
